<script setup>
import { watch, reactive,ref } from 'vue';
import { ElMessage } from 'element-plus';
import Tinymce from '../../../../components/Tinymce'
const {
    attrList,
    detail,
    buteList
} = defineProps({
    attrList: Array,
    detail: Object,
    buteList: Array
})


const emit = defineEmits('skuListChange')

const colorItem = ref('');

const index = ref(0)

const activeName = ref('1')
// 定义一个数据，商品规格的数据
const data = reactive({
    skuList: [{
        spData: []
    }],
    colorList: [],
    sizeList: []
})

watch(detail, (abc) => {
    if (typeof abc.skuStockList == 'object') {
        data.skuList = [];
        abc.skuStockList.forEach((item, index) => {
            if (index == 0) {
                data.skuList[0] = JSON.parse(JSON.stringify(item))
            } else {
                data.skuList.push(JSON.parse(JSON.stringify(item)))
            }
            data.sizeList.push(data.skuList[index].spData[1].value);
        })
        data.sizeList = [...new Set(data.sizeList)];
        if(index.value < 1){
            data.colorList = abc.productAttributeValueList[0].value.split(',');
        }
    }
    index.value ++;
}, {
    immediate: true
})

// 删除
const del = (index) => {
    data.skuList.splice(index, 1);
}

// 添加颜色属性
const addColorList = () => {
    // console.log(colorItem.value);
    detail.productAttributeValueList[0].value += `,${colorItem.value}`;
    colorItem.value = ''
}

// 刷新列表
const refresh = () => {
    let arr = [];
    data.colorList.forEach(item => {
        data.sizeList.forEach(items => {
            let obj = {
                price: '',
                stock: '',
                lowStock: '',
                skuCode: '',
                spData: []
            };
            for (let index = 0; index < 2; index++) {
                obj.spData.push({
                    key: index == 0 ? '颜色' : '容量',
                    value:index == 0 ? item : items 
                })
            }
            arr.push(obj);
        });        
    })
    emit('skuListChange',arr);
}

const likePrice = () => {
    let price = data.skuList[0].price;
    data.skuList.forEach(item => {
        item.price = price;
    })
}
const likeSkuLock = () => {
    let stock = data.skuList[0].stock;
    let lowStock = data.skuList[0].lowStock;
    data.skuList.forEach(item => {
        item.stock = stock;
        item.lowStock = lowStock;
    })
}

const delValue = (index) => {
    let arr = detail.productAttributeValueList[0].value.split(',');
    arr.splice(index,1)

    let str = '';
    if(arr.length == 0){
        ElMessage.error('请保留最少一个颜色的sku')
        return
    }
    arr.forEach(item => {
        str += item + ','
    })
    detail.productAttributeValueList[0].value = str.substring(0,str.length-1);
}

</script>

<template>
    <div class="productDetail">
        <el-form>
            <el-form-item label="属性类型：">
                <el-select v-model="detail.productAttributeCategoryId" placeholder="请选择">
                    <el-option v-for="(item) in attrList" :key="item.id" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item label="商品规格：">
                <el-row v-for="(item, index) in buteList" :key="index">
                    <el-col :span="24">
                        {{ item.name }}:
                    </el-col>
                    <el-col :span="24">
                        <template v-if="item.inputList.length > 0">
                            <el-checkbox-group v-model="data.sizeList">
                                <el-checkbox v-for="(items, indexs) in item.inputList.split(',')" :key="indexs"
                                    :label="items" />
                            </el-checkbox-group>
                        </template>
                        <template v-else>
                            <el-checkbox-group
                                v-model="data.colorList"
                                >
                                <template  v-for="(items, indexs) in detail.productAttributeValueList[0].value.split(',')">
                                    <el-row>
                                        <el-col :span="4">
                                            <el-checkbox :label="items">
                                                {{ items }}
                                            </el-checkbox>
                                        </el-col>
                                        <el-col :span="4">
                                            <span style="color: blue;" @click="delValue(indexs)">
                                                删除
                                            </span>
                                        </el-col>
                                    </el-row>
                                </template>
                            </el-checkbox-group>
                            <el-row>
                                <el-col :span="8">
                                    <el-input v-model="colorItem" />
                                </el-col>
                                <el-col :span="4">
                                    <el-button @click="addColorList">
                                        增加
                                    </el-button>
                                </el-col>
                            </el-row>
                        </template>
                    </el-col>
                </el-row>
                <el-table
                    v-if="data.skuList.length > 0"
                    :data="data.skuList">
                    <!-- 循环规格数据 -->
                    <el-table-column v-for="(item, index) in data.skuList[0].spData" :key="index" :label="item.key"
                        :prop="`spData[${index}].value`">
                    </el-table-column>
                    <el-table-column label="销售价格">
                        <template #default="scope">
                            <el-input type="text" v-model="scope.row.price" />
                        </template>
                    </el-table-column>
                    <el-table-column label="商品库存">
                        <template #default="scope">
                            <el-input type="text" v-model="scope.row.stock" />
                        </template>
                    </el-table-column>
                    <el-table-column label="库存预警值">
                        <template #default="scope">
                            <el-input type="text" v-model="scope.row.lowStock" />
                        </template>
                    </el-table-column>
                    <el-table-column label="SKU编号">
                        <template #default="scope">
                            <el-input type="text" v-model="scope.row.skuCode" />
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="text" @click="del(scope.$index
                            )">
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="4">
                        <el-button type="primary" @click="refresh">
                            刷新列表
                        </el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="likePrice">
                            同步价格
                        </el-button>
                    </el-col>
                    <el-col :span="4">
                        <el-button type="primary" @click="likeSkuLock">
                            同步库存
                        </el-button>
                    </el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="规格参数：">
                <el-tabs
                    v-model="activeName"
                    type="card"
                    class="demo-tabs"
                >
                    <el-tab-pane label="电脑端详情" name="1">
                        <tinymce :width="595" :height="300" :value="detail.detailHtml" />
                    </el-tab-pane>
                    <el-tab-pane label="移动端详情" name="2">
                        <tinymce :width="595" :height="300" :value="detail.detailMobileHtml" />
                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
        </el-form>
    </div>
</template>

<style>
.el-form-item__content {
    display: block !important;
}
.el-checkbox-group{
    font-size: 14px !important;
    line-height: 32px;
}
</style>